<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录 - 推免系统</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Microsoft YaHei', sans-serif;
      background: #ffffff;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .login-container {
      background: white;
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      width: 400px;
    }

    .login-header {
      text-align: center;
      margin-bottom: 30px;
    }

    .login-header h1 {
      color: #333;
      font-size: 28px;
      margin-bottom: 10px;
    }

    .login-header p {
      color: #666;
      font-size: 14px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      color: #333;
      font-weight: 500;
    }

    .form-control {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
      transition: border-color 0.3s;
    }

    .form-control:focus {
      border-color: #409eff;
      outline: none;
    }

    .btn-login {
      width: 100%;
      padding: 12px;
      background: #409eff;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .btn-login:hover {
      background: #337ecc;
    }

    .alert {
      padding: 12px;
      border-radius: 6px;
      margin-bottom: 20px;
      display: none;
    }

    .alert-error {
      background: #fee;
      border: 1px solid #f5c6cb;
      color: #721c24;
    }

    .register-link {
      text-align: center;
      margin-top: 15px;
    }

    .register-link a {
      color: #409eff;
      text-decoration: none;
    }

    .register-link a:hover {
      text-decoration: underline;
    }

    .login-footer {
      text-align: center;
      margin-top: 20px;
      color: #666;
      font-size: 14px;
    }
  </style>
</head>
<body>
<div class="login-container">
  <div class="login-header">
    <h1>推免系统</h1>
    <p>欢迎登录，请填写您的账号信息</p>
  </div>

  <div id="errorAlert" class="alert alert-error"></div>

  <form id="loginForm">
    <div class="form-group">
      <label for="account">账号</label>
      <input type="text" id="account" class="form-control" placeholder="请输入账号" required>
    </div>

    <div class="form-group">
      <label for="password">密码</label>
      <input type="password" id="password" class="form-control" placeholder="请输入密码" required>
    </div>

    <button type="button" class="btn-login" onclick="login()">登录</button>
  </form>

  <div class="register-link">
    <a href="register.html">学生注册</a>
  </div>

  <div class="login-footer">
    <p>推免系统 &copy; 2025(^ ^)</p>
  </div>
</div>

<script>
  // 显示错误信息
  function showError(message) {
    const errorAlert = document.getElementById('errorAlert');
    errorAlert.textContent = message;
    errorAlert.style.display = 'block';
  }

  // 隐藏错误信息
  function hideError() {
    document.getElementById('errorAlert').style.display = 'none';
  }

  // 登录函数
  async function login() {
    const account = document.getElementById('account').value.trim();
    const password = document.getElementById('password').value.trim();

    if (!account || !password) {
      showError('请输入账号和密码');
      return;
    }

    hideError();

    try {
      const response = await fetch('/api/open/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          account: account,
          password: password
        })
      });

      const result = await response.json();

      if (result.code === 200) {
        // 从响应头获取token
        const token = response.headers.get('token');
        const role = response.headers.get('role');

        if (!token) {
          showError('登录失败：未获取到token');
          return;
        }

        // 保存token到localStorage
        localStorage.setItem('token', token);
        localStorage.setItem('role', role);
        localStorage.setItem('user', JSON.stringify(result.data));

        // 根据角色跳转到不同页面
        switch(role) {
          case 'Fr5g': // 超级管理员
            window.location.href = 'admin-colleges.html';
            break;
          case 'yHJ7': // 学院管理员
            window.location.href = 'collegeadmin-dashboard.html';
            break;
          case 'Ca24': // 辅导员
            window.location.href = 'counselor-dashboard.html';
            break;
          case 'dA5q': // 学生
            window.location.href = 'student-dashboard.html';
            break;
          default:
            showError('未知用户角色: ' + role);
        }

      } else {
        showError(result.message || '登录失败');
      }
    } catch (error) {
      showError('登录失败，请检查网络连接');
    }
  }

  // 回车键登录
  document.getElementById('password').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      login();
    }
  });

  // 页面加载时自动聚焦到账号输入框
  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('account').focus();
  });
</script>
</body>
</html>